
.t-textarea {
  width: 100%;
  box-sizing: border-box;
}
.textarea-title{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    text-align: right;
    justify-content: flex-end;
}
.tr-textarea-default .q-field--dense .q-field__inner {
  font-size: 14px;
  color: rgba(0,0,0,0.56);
   padding: 0px;
}
.tr-textarea-default .q-field--dense .q-field__inner .q-field__bottom {
  color: #FF0000;
  font-size: 12px;
  padding-top: 5px;
}
.tr-textarea-default .q-field--dense .q-field__inner .q-field__bottom .q-field__messages {
  line-height: 1.5;
}
.tr-textarea-default .q-field--dense .q-field__inner .q-field__control{
 border: 1px solid #d9d9d9;
   border-radius: 2px;
   background-color: #ffffff;
}
.tr-textarea-default .q-field--dense .q-field__inner .q-field__control .q-field__control-container {
   padding: 0px;
}
.tr-textarea-default .q-field--dense .q-field__inner .q-field__control .q-field__control-container .q-field__native{
   padding: 8px;
   color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
   height: auto;
   line-height: 1.5;
}
.tr-textarea-default .q-field--dense .q-field__inner .q-field__control .q-field__control-container .q-field__counter{
  right: 12px;
  bottom: 12px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.56);
}
.tr-textarea-default  .q-field--readonly .q-field__inner .q-field__control-container .q-placeholder::placeholder{
  color: rgba(0, 0, 0, 0);
}
  //pc端hover和focus时样式
.tr-textarea-default .q-field--dense .q-field__inner .q-field__control:hover{
  border: 1px solid var(--t-color);
}

.tr-textarea-default  .q-field--focused .q-field__inner .q-field__control{
border: 1px solid var(--t-color);
box-shadow: 0 0 3px rgba(var(--t-color-rgb), 0.6);
}

//校验失败时样式
.tr-textarea-default   .q-field--error .q-field__inner .q-field__control{
   border: 1px solid #FF5A66!important;
}
.tr-textarea-default   .q-field--error .q-field__inner .q-field__control:hover{
    border: 1px solid #FF5A66!important;
  box-shadow: 0 0 3px #FF5A6699;
}
.tr-textarea-default   .q-field--error .q-field__inner .q-field__control:focus{
    border: 1px solid #FF5A66!important;
  box-shadow: 0 0 3px #FF5A6699;
}
.tr-textarea-default  .q-field--focused.q-field--error .q-field__inner .q-field__control{
  box-shadow: 0 0 3px #FF5A6699;
}
// .tr-input-default .q-field--error ~ .q-field--focus {
//   /* 在 q-field--error 存在时，改变同级的 q-field--focus 的样式 */
//     box-shadow: 0 0 3px rgba(255, 90, 102, 0.6)!important;
// }
.tr-textarea-default  .q-field--dense .q-field__inner .q-field__bottom{
  color: #FF0000;
}
.tr-textarea-default  .q-field--dense .q-field__inner .q-field__control .q-field__append .text-negative{
      font-size: 0px;
}
.q-placeholder::placeholder{
  color: rgba(0, 0, 0, 0.32);
}

//pc端readonly和disable样式
.tr-textarea-default .q-field--readonly .q-field__inner .q-field__control .q-field__control-container .q-field__native{
    cursor: default;
}
.tr-textarea-default .q-field--readonly .q-field__inner .q-field__control:hover{
    border: 1px solid #D9D9D9;
}
.tr-textarea-noborder .q-field--readonly .q-field__inner .q-field__control:hover{
  border: 1px solid #d9d9d900!important;
}
.tr-textarea-default .q-field--readonly .q-field__inner .q-field__control .q-field__control-container .q-field__counter{
 display: none;
}
.tr-textarea-default .q-field--disabled .q-field__inner .q-field__control .q-field__control-container .q-field__counter{
 display: none;
}
.tr-textarea-default   .q-field--readonly .q-field__inner .q-field__control{
  background-color: #ffffff;
   border: 1px solid #D9D9D9;
}
  .tr-textarea-default .q-field--disabled .q-field__inner .q-field__control{
  border-color: transparent!important;
  background-color: #f1f1f1;
  &.q-field__native{
  color: rgba(0, 0, 0, 0.56);
  }
}
.tr-textarea-default{
     display: flex;
    align-content: center;
    flex-direction: row;
    justify-content: center;
    align-items:  flex-start;
      .tr-label-prefix-wraper-left{
      width:auto;
      padding-top: 12px;
       }
    .tr-label-prefix{
      justify-content: flex-end;
      text-wrap: wrap;
      gap: 4px;
      margin-right: 8px;
    }
    &.tr-textarea-default-top{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .tr-label-prefix{
      justify-content: flex-start;
      gap: 4px;
    }
        .tr-label-prefix-wraper{
           padding-bottom: 4px;
           padding-top: 0px;
    }
        .textarea-title{
          line-height:1.5;
    }
    }
}

  //移动端默认样式
  @media screen and (max-width: 767px){

.q-placeholder::placeholder{
  color: #969AA0
}
  .tr-textarea-default .tr-label-prefix-wraper{
    padding-top: 17px;
    max-width: 122px;
    width: auto;
  }
    .tr-textarea-default.tr-textarea-default-top .textarea-title{
       font-size: 12px;
  }
  .tr-textarea-default .q-field--dense .q-field__inner .q-field__control .q-field__control-container .q-field__native{
   padding: 10px 0px;
   resize: none;

}
.tr-textarea-default .q-field--dense .q-field__inner .q-field__control .q-field__control-container .q-field__counter{
  right: 16px;
  bottom: 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.56);
}
  //移除pc端hover和focus时样式
    .tr-textarea-default .q-field--dense .q-field__inner .q-field__control{
  border: 1px solid rgba(0, 0, 0, 0);
}
  .tr-textarea-default .q-field--dense .q-field__inner .q-field__control:hover{
  border: 1px solid rgba(0, 0, 0, 0);
}
.tr-textarea-default  .q-field--focused .q-field__inner .q-field__control{
  border: 1px solid rgba(0, 0, 0, 0)!important;
box-shadow: 0 0 3px rgba(0, 0, 0, 0);
}
//pc端只读和禁用样式
  .tr-textarea-default .q-field--readonly {
   background-color: #ffffff;
   border-color: #D9D9D9!important;
}
.tr-textarea-default .q-field--readonly .q-field__inner .q-field__control{
  background-color: #ffffff;
}
.tr-textarea-default .q-field--readonly .q-field__inner .q-field__control .q-field__control-container .q-field__native{
   color: rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9));
}
.tr-textarea-disabled .q-field--disabled .q-field__inner .q-field__control{
  background-color: white;
}
.tr-textarea-disabled .q-field--disabled .q-field__inner .q-field__control .q-field__control-container .q-field__native{
   color: #BFC1C5;
}
  .tr-textarea-default .q-field--disabled {
   background-color: #ffffff;
   border-color: #D9D9D9!important;
  &.q-field__native{
  color: rgba(0, 0, 0, 0.56);
  }
}


//移除pc端校验失败时样式
.tr-textarea-default .q-field--error .q-field__inner .q-field__control{
     border: 1px solid #ffffff00!important;
}
.tr-textarea-default  .q-field--error .q-field__inner .q-field__control:hover{
    border: 1px solid #ffffff00!important;
    box-shadow: 0 0 3px #ffffff00;
}
.tr-textarea-default  .q-field--error .q-field__inner .q-field__control:focus{
    border: 1px solid #ffffff00;
    box-shadow: 0 0 3px #ffffff00;
}
.tr-textarea-default .q-field--focused.q-field--error .q-field__inner .q-field__control{
  box-shadow: 0 0 3px #ffffff00;
}
.tr-textarea-default .q-field--dense .q-field__inner .q-field__bottom{
  padding: 7px 0px;
  color: #FF0000;;
}
//移动端校验失败时样式
    // .tr-input-default{
    //   border-bottom: 1px solid #E34949
    // }

}
@media (max-width: 19px) {
  .q-field__append {
    display: none;
  }
}

.tr-textarea-noborder .q-field--dense .q-field__inner .q-field__control{
  border: 1px solid rgb(255, 255, 255, 0);
 }
.tr-textarea-noborder .q-field--dense .q-field__inner .q-field__control:hover{
  border: 1px solid rgb(255, 255, 255, 0);
 }
 .tr-textarea-noborder .q-field--focused .q-field__inner .q-field__control{
  box-shadow:0 0 3px rgb(255, 255, 255, 0)
 }

.t-textarea{

  &.counter_out{
    .q-field__native.q-placeholder{
      margin-bottom: 25px !important;
    }
  }

  &.counter_bg{
    .q-field__counter{
      background-color: white;
      bottom: 0 !important;
      right: 0 !important;
      padding-right: 16px;
      padding-top: 8px;
      padding-bottom: 8px;
    }
  }

}
